<template>
    <el-card>
        <el-table border :data="skuList">
            <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
            <el-table-column prop="skuName" label="名称"></el-table-column>
            <el-table-column prop="skuDesc" label="描述"></el-table-column>
            <el-table-column align="center" label="默认图片">
                <template v-slot="{ row }">
                    <img :src="row.skuDefaultImg" class="sku-Img">
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-button type="primary">上架</el-button>
                    <el-button type="primary">下架</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
        v-model:current-page="currentPage" 
        v-model:page-size="pageSize" :total="total"
        :page-sizes="[10, 20, 30, 40]" 
        layout="prev, pager, next, jumper, ->, sizes, total" 
        @current-change="handlecurrentchange" 
        @size-change="handleSizeChange"
        >
        </el-pagination>
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'Table'
}
</script>

<script setup lang="ts">
import { reqGetSku } from '@/api/product/sku'
import { ref, onMounted } from 'vue'
const currentPage = ref<number>(1);
const pageSize = ref<number>(8);
const total = ref<number>(0);
const skuList = ref([])

const getSkuData = async () => {
    const result = await reqGetSku(currentPage.value, pageSize.value)
    console.log(result)
    total.value = result.total
    skuList.value = result.records
}

const handlecurrentchange = async(val:number)=>{
    currentPage.value = val
    getSkuData()
}

const handleSizeChange = (val:number)=>{
    currentPage.value = 1
    pageSize.value = val
    getSkuData()
}
onMounted(getSkuData)
</script>

<style scoped>
.sku-Img {
    width: 60px;
    height: 60px;
}
</style>